<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../../css/app.css">
    <link rel="stylesheet" type="text/css" href="../../../css/tabBar.css">
    <link rel="stylesheet" type="text/css" href="../comm/shop_comm.css">
    <link rel="stylesheet" type="text/css" href="./goods_manage.css">
    <title>商品管理</title>
</head>

<body>
    <div class="header navigationBar">
      	<div class="wrapper">
          	<span id="btn-back" class="header-btn left-btn backtrack"></span>
          	<span class="title">商品管理</span>
      	</div>
  	</div>
  	<div class="container top-container">
  		<div class="aui-searchbar" id="search">
		    <div class="aui-searchbar-input aui-border-radius">
		        <i class="aui-iconfont aui-icon-search"></i>
		        <!-- <form action="javascript:search();"> -->
            <form action="javascript:;" class="form_">
		            <input type="search" placeholder="请输入搜索内容" id="search-input" @search="doSearch">
		        </form>
		    </div>
		</div>
		<ul class="goods_mge_tab">
			<li :class="tabIndex == 0 ? 'active' : ''" @click="goodsMaeTab(0)">
				<span>出售中</span>
			</li>
			<li :class="tabIndex == 1 ? 'active' : ''" @click="goodsMaeTab(1)">
				<span>已下架</span>
			</li>
			<li :class="tabIndex == 2 ? 'active' : ''" ref="tabClassfiy">
				<span @click="goodsMaeTab(2)">筛选</span>
				<img src="../../../image/shop/buy/buy-43.png" data-index="2" @click="classifyDown"/>
			</li>
		</ul>
		<div class="goods_mge_null">
			<img src="../../../image/shop/buy/buy-84.png"/>
  			<h2>空空如也</h2>
  			<p>可以添加商品并分享给你客户</p>
  			<a href="javascript:void(0);" @click="goodsMangeAdd">添加商品</a>
		</div>



		<div class="goods_mge_list" ref="goodsMgeUl">
			<ul class="goods_mge_ul" :class="tabIndex==0 ? 'active' : ''">  <!-- 出售中商品列表 -->
				<li v-for="item in classifyList" :data-id="item.goods_id">
					<div class="goods_mge_info" @click="open_detail(item.goods_id)">
            <img src="../../../image/shop/shop_detail.png" class="detail_img" alt="">
						<div class="goods_list_img">
							<img :src="item.cover+'?x-oss-process=image/resize,m_lfit,w_960'"/>
							<div v-if="item.isSoldOut"><span>已下架</span></div>
						</div>
						<div class="goods_list_detail">
							<h2 v-html='item.name'></h2>
							<b>¥ <span v-html="item.sale_price"></span> </b>
							<div>
								<span>库存<i v-html="item.all_stock"></i></span>
								<span>收藏<i v-html="item.favorite"></i></span>
								<u>添加时间：<span v-html="item.date_add"></span> </u>
							</div>
						</div>
					</div>
					<div class="goods_mge_btn">
						<a href="javascipr:void(0);" @click="openBuyDetail(item.goods_id)">
							<i class="aui-iconfont aui-icon-display"></i><p>预览</p>
						</a>
						<a href="javascipr:void(0);" class="goods_mge_share" @click="goodsManageShare(item.cover, item.name, item.goods_id)">
							<i class="aui-iconfont aui-icon-share"></i><p>分享</p>
						</a>
					</div>
				</li>
			</ul>
			<ul class="goods_mge_ul" :class="tabIndex==1 ? 'active' : ''">  <!-- 已下架商品列表 -->
				<li v-for="item in classifyList" :data-id="item.goods_id">
					<div class="goods_mge_info" @click="open_detail(item.goods_id)">
            <img src="../../../image/shop/shop_detail.png" class="detail_img" alt="">
						<div class="goods_list_img">
							<img :src="item.cover+'?x-oss-process=image/resize,m_lfit,w_960'"/>
							<div><span>已下架</span></div>
						</div>
						<div class="goods_list_detail">
							<h2 v-html="item.name"></h2>
							<b>¥ <span v-html="item.sale_price"></span></b>
							<div>
								<span>库存<i>{{item.all_stock}}</i></span>
								<span>收藏<i>{{item.favorite}}</i></span>
								<u>添加时间：{{item.date_add}}</u>
							</div>
						</div>
					</div>
					<div class="goods_mge_btn">
						<a href="javascipr:void(0);" @click="productDel(item.goods_id)">
							<img src="../../../image/shop/buy/buy-38.png"/><p>删除</p>
						</a>
						<a href="javascipr:void(0);" class="goods_mge_share" @click="productOnSale(item.goods_id)">
							<img src="../../../image/shop/buy/buy-37.png"/><p>上架</p>
						</a>
					</div>
				</li>
			</ul>
			<ul class="goods_mge_ul" :class="tabIndex==2 ? 'active' : ''">  <!-- 分类列表 -->
				<li v-for="item in classifyList" :data-id="item.goods_id">
					<div class="goods_mge_info" @click="open_detail(item.goods_id)">
            <img src="../../../image/shop/shop_detail.png" class="detail_img" alt="">
						<div class="goods_list_img">
							<img :src="item.cover+'?x-oss-process=image/resize,m_lfit,w_960'"/>
							<div v-if="item.on_sale == 0"><span>已下架</span></div>
						</div>
						<div class="goods_list_detail">
							<h2 v-html="item.name"></h2>
							<b>¥ <span v-html="item.sale_price"></span> </b>
							<div>
								<span>库存<i v-html="item.all_stock"></i></span>
								<span>收藏<i v-html="item.favorite"></i></span>
								<u>添加时间：<span v-html="item.date_add"></span> </u>
							</div>
						</div>
					</div>
					<div class="goods_mge_btn" v-if="item.on_sale == 0">
						<a href="javascipr:void(0);" @click="productDel(item.goods_id)">
							<img src="../../../image/shop/buy/buy-38.png"/><p>删除</p>
						</a>
						<a href="javascipr:void(0);" class="goods_mge_share" @click="productOnSale(item.goods_id)">
							<img src="../../../image/shop/buy/buy-37.png"/><p>上架</p>
						</a>
					</div>
					<div class="goods_mge_btn" v-else>
						<a href="javascipr:void(0);">
							<i class="aui-iconfont aui-icon-display"></i><p>预览</p>
						</a>
						<a href="javascipr:void(0);" class="goods_mge_share" @click="goodsManageShare(item.cover, item.name, item.goods_id)">
							<i class="aui-iconfont aui-icon-share"></i><p>分享</p>
						</a>
					</div>
				</li>
			</ul>
			<div class="goods_mge_classfiy" ref="goodsMgeClassfiy">
				<div @click="goodsManageClassfiyClose"></div>
				<ul>
					<li v-for="(item,index) in classfiyDown" :class="classfiyIndex == index ? 'active' : ''"
						:data-id="item.category_id" :data-index="index" @click="classfiyDownLi">
						{{item.name}}
					</li>
				</ul>
			</div>
			<div class="goods_share_manage" ref="goodsMangeShare">
				<div @click="goodsMangeShareClose"></div>
				<section>
					<p>分享至</p>
					<div @click="share('friend')">
						<img src="../../../image/shop/buy/buy-64.png"/>
						<p>微信</p>
					</div>
					<div @click="share('circle')">
						<img src="../../../image/shop/buy/buy-63.png"/>
						<p>朋友圈</p>
					</div>
				</section>
			</div>
		</div>
	  	<div class="shop_footer" v-show="tabIndex!=2">
	  		<a href="javascipr:void(0);" class="goodsAdd" @click="goodsMangeAdd">
	  			<i></i>添加商品
	  		</a>
	  		<a href="javascipr:void(0);" class="goodsBatch" @click="goodsManageBatch(tabIndex)">
	  			<i></i>批量管理
	  		</a>
	  	</div>
      <div class="shop_footer" v-show="tabIndex==2">
	  		<a href="javascipr:void(0);" class="classAdd" @click="newClassify">
	  			<i></i>新建分类
	  		</a>
	  		<a href="javascipr:void(0);" class="classManage" @click="classManageBatch">
	  			<i class="aui-iconfont aui-icon-menu"></i>分类管理
	  		</a>
	  	</div>

</body>
<script src="../../sea.js" data-main="../../main"></script>
<script type="text/javascript" src="../../vue.js"></script>
<script type="text/javascript" src="./goodsManage.js"></script>
</html>
